<template>
  <div>
    <Header :isGoBack="false" :width="1000">
      <template v-slot:right>
        <div class="btn" @click="$router.back()">
          <i class="el-icon-arrow-left"></i> 返回
        </div>
      </template>
    </Header>
    <div class="test-record w1000">
      <div class="word-book-container">
        <div class="word-book-header mb20">
          <div>
            {{ checkedBookData.edition_name }}-{{ checkedBookData.grade_name }}
            <el-dropdown @command="checkBook" v-if="isIndex">
              <span class="el-dropdown-link">
                换课程
                <i class="el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in classData"
                  :key="item.book_id + '' + index"
                  :command="item"
                >
                  {{ item.edition_name }}-{{ item.grade_name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div
          class="word-book-header"
          style="margin-top: 20px;font-size: 18px;border: none;"
        >
          1.单词速记王
        </div>
        <div class="unit-select common-select">
          <span>测试类型: </span>
          <el-select
            v-model="value"
            placeholder="请选择"
            @change="categroyChange"
          >
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="item in $store.getters.categoryList.filter((item) => {
                return item.category !== 6 && item.category !== 4;
              })"
              :key="item.category"
              :label="item.title"
              :value="item.category"
            >
            </el-option>
          </el-select>
        </div>
        <div class="common-table common-pagination">
          <el-table border :data="tableData" style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="80"
              :index="indexMethod"
            >
            </el-table-column>
            <el-table-column prop="category" label="测试类型" width="180">
              <template slot-scope="scope">
                <div>
                  {{ getCategoryName(scope.row.category) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="category" label="测试单元">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.unit_name || "-" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="start_time" label="测试时间">
            </el-table-column>
            <el-table-column prop="test_time" label="耗时(s)">
            </el-table-column>
            <el-table-column prop="score" label="得分" width="80">
            </el-table-column>
            <el-table-column prop="score" label="说明">
              <template slot-scope="scope">
                <div>
                  <span v-if="scope.row.score >= 0 && scope.row.score <= 14"
                    >很遗憾 你仅到达了黑铁段位
                  </span>
                  <span v-if="scope.row.score > 14 && scope.row.score <= 28"
                    >很遗憾 你仅到达了青铜段位
                  </span>
                  <span v-if="scope.row.score > 28 && scope.row.score <= 42"
                    >很遗憾 你仅到达了白银段位
                  </span>
                  <span v-if="scope.row.score > 42 && scope.row.score <= 56"
                    >恭喜你 你的段位在黄金段位
                  </span>
                  <span v-if="scope.row.score > 56 && scope.row.score <= 85"
                    >恭喜你 你的段位在钻石段位
                  </span>
                  <span v-if="scope.row.score > 85 && scope.row.score <= 90">
                    恭喜你 你的段位在大师段位
                  </span>
                  <span v-if="scope.row.score > 90 && scope.row.score <= 100">
                    太棒了 你到达了王者段位
                  </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            v-if="paperData.total_page > 1 && showPagination"
            class="fr"
            background
            :page-size="paperParams.pageSize"
            layout="prev, pager, next"
            :total="paperData.total_num"
          >
          </el-pagination>
        </div>
        <TestRecord
          v-if="isIndex"
          :isShow="!isIndex"
          :parentCheckedBookData="checkedBookData"
        ></TestRecord>
        <div  v-if="isIndex">
          <div
          class="word-book-header"
          style="margin-top: 20px;font-size: 18px;border: none;"
        >
          3.单词量测试
        </div>
        <div class="unit-select common-select">
          <span>测试类型: </span>
          <el-select
            v-model="value1"
            placeholder="请选择"
            @change="findTestRecord"
          >
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="item in recordList"
              :key="item.category"
              :label="item.title"
              :value="item.category"
            >
            </el-option>
          </el-select>
        </div>
        <div class="common-table common-pagination">
          <el-table border :data="recordTableData" style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="80"
              :index="indexMethod"
            >
            </el-table-column>
            <el-table-column prop="book_name" label="测试版本" width="100"></el-table-column>
            <el-table-column prop="category" label="测试类型" width="180">
              <template slot-scope="scope">
                <div>
                  {{ getCategoryName3(scope.row.category) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="category" label="测试单元">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.unit_name || "-" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="start_time" label="测试时间">
            </el-table-column>
            <el-table-column prop="test_time" label="耗时(s)">
            </el-table-column>
            <el-table-column prop="score" label="得分" width="80">
            </el-table-column>
            <el-table-column prop="score" label="说明">
              <template slot-scope="scope">
                <div>
                  <span v-if="scope.row.score >= 0 && scope.row.score <= 14"
                    >很遗憾 你仅到达了黑铁段位
                  </span>
                  <span v-if="scope.row.score > 14 && scope.row.score <= 28"
                    >很遗憾 你仅到达了青铜段位
                  </span>
                  <span v-if="scope.row.score > 28 && scope.row.score <= 42"
                    >很遗憾 你仅到达了白银段位
                  </span>
                  <span v-if="scope.row.score > 42 && scope.row.score <= 56"
                    >恭喜你 你的段位在黄金段位
                  </span>
                  <span v-if="scope.row.score > 56 && scope.row.score <= 85"
                    >恭喜你 你的段位在钻石段位
                  </span>
                  <span v-if="scope.row.score > 85 && scope.row.score <= 90">
                    恭喜你 你的段位在大师段位
                  </span>
                  <span v-if="scope.row.score > 90 && scope.row.score <= 100">
                    太棒了 你到达了王者段位
                  </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="recordCurrentChange"
            v-if="recordData.total_page > 1 && showPagination"
            class="fr"
            background
            :page-size="recordParams.pageSize"
            layout="prev, pager, next"
            :total="recordData.total_num"
          >
          </el-pagination>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import TestRecord from "@/views/sentence/testCenter/testRecord/Index.vue";
import {
  getPaperList,
  getUnitList,
  getClassData,
  findTestRecord,
} from "@/api/index";
export default {
  data() {
    return {
      value1: null,
      value: null,
      tableData: [],
      paperParams: {
        pageNum: 1,
        pageSize: 10,
      },
      recordData:{
        total_page:0,
        total_num:0
      },
      recordParams: {
        pageNum: 1,
        pageSize: 10,
      },
      recordTableData:[],
      recordList: [
        {
          title: "单元测试",
          category: 25,
        },
        {
          title: "分册测试",
          category: 26,
        },
        {
          title: "体验课测试",
          category: 27,
        },
      ],
      paperData: {},
      bookId: null,
      unitId: null,
      unitList: [],
      showPagination: true,
      classData: [],
      isIndex: false,
    };
  },
  components: {
    Header,
    TestRecord,
  },
  methods: {
    async findTestRecord() {
      let pamas = {
        pageNum: this.recordParams.pageNum,
        pageSize: this.recordParams.pageSize,
      };
      let data = {
        category: this.value1,
        book_id: 0,
        unit_id: null,
      };
      const res=await findTestRecord( pamas,data);
      this.recordData.total_page=res.data.total_page,
      this.recordData.total_num=res.data.total_num
      this.recordTableData=res.data.list
    },
    async checkBook(data) {
      this.checkedBookData = data;
      this.getPaperList();
    },
    getClassData() {
      getClassData()
        .then((res) => {
          if (res.code == 200 && res.data) {
            res.data = res.data.filter((item) => {
              return item.status == 0;
            });
            this.classData = res.data;
            if (this.classData) {
              let index = this.classData.findIndex((item) => {
                return item.book_id == this.checkedBookData.book_id;
              });
              if (index == -1) {
                this.goStudyIndex();
              } else {
                this.checkBook(this.classData[index]);
              }
            }
          }
        })
        .catch(() => {});
    },
    getCategoryName(category) {
      let data = this.$store.getters.categoryList.filter((item) => {
        return item.category == category;
      });
      if (data.length > 0) {
        return data[0].title;
      } else {
        return "";
      }
    },
    getCategoryName3(category) {
      let data = this.recordList.filter((item) => {
        return item.category == category;
      });
      if (data.length > 0) {
        return data[0].title;
      } else {
        return "";
      }
    },
    getUnitList() {
      let params = {
        bookId: this.checkedBookData.book_id,
      };
      getUnitList(params).then((res) => {
        if (res.code == 200 && res.data) {
          this.unitList = res.data;
        }
      });
    },
    indexMethod(index) {
      return (
        (this.paperParams.pageNum - 1) * this.paperParams.pageSize + index + 1
      );
    },
    // 返回测试中心
    // goTestCenter() {
    //   this.$router.push({
    //     name: "testCenter",
    //   });
    // },
    getPaperList() {
      let data = {
        page_require: {
          page_num: this.paperParams.pageNum,
          page_size: this.paperParams.pageSize,
        },
        category: this.value,
        book_id: this.checkedBookData.book_id,
        unit_id: this.unitId,
      };
      getPaperList(data).then((res) => {
        if (res.code == 200 && res.data) {
          this.paperData = res.data;
          this.tableData = res.data.list;
        }
      });
    },
    recordCurrentChange(value){
      this.recordParams.pageNum = value;
      this.findTestRecord();
    },
    handleCurrentChange(value) {
      this.paperParams.pageNum = value;
      this.getPaperList();
    },
    categroyChange() {
      this.showPagination = false;
      this.paperParams.pageNum = 1;
      this.$nextTick(() => {
        this.showPagination = true;
      });
      this.getPaperList();
    },
  },
  created() {
    if (this.$route.query.isIndex) {
      this.isIndex = true;
      this.findTestRecord()
    }
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.getClassData();
    // this.getPaperList();
  },
};
</script>
